<script>
    import BasePicker from '@c/BasePicker/BasePicker'
    import mpvuePicker from 'mpvue-picker';

    export default {
        data() {
            return {
                showPicker: true,
                mode: 'multiLinkageSelector',
                deepLength: 2,// 几级联动
                pickerValueDefault: [1, 0],//初始化值
                themeColor: '',//颜色主题
                pickerValueArray:
                    [
                        {
                            label: '今天',
                            value: 0,
                            children: [{
                                label: '随时可以(9:00-21:00)',
                                value: 1
                            },
                                {
                                    label: '15:00-17:00',
                                    value: 2
                                }, {
                                    label: '17:00-19:00',
                                    value: 3
                                },{
                                    label: '19:00-21:00',
                                    value: 4
                                },
                            ]
                        },
                        {
                            label: '明天',
                            value: 1,
                            children: [{
                                label: '随时可以(9:00-21:00)',
                                value: 1
                            },
                                {
                                    label: '9:00-11:00',
                                    value: 2
                                }, {
                                    label: '11:00-13:00',
                                    value: 3
                                },{
                                    label: '13:00-15:00',
                                    value: 4
                                },
                            ]
                        },
                    ],

            }
        },
        components: {
            BasePicker,
            mpvuePicker
        },
        methods: {
            e_chosePicker() {
                console.log('111')
                this.$refs.mpvuePicker.show();
            },
            /**
             * @Description 关闭picker
             * @author Anonymous
             * @date 2019/4/30
             */
            closePicker() {
                this.showPicker = false
            },
            showPicker() {


            },
            onConfirm(e) {
                console.log(e);

            },
            onChange(e) {
                console.log(e);
            },
            onCancel(e) {
                console.log(e);
            }

        },
        onShow() {

        },
        mounted() {

        },
        created() {
        }
    }
</script>
<template>
    <div class="container">
        <span @click="e_chosePicker">选择时间</span>
        <!--        <BasePicker v-if="showPicker" v-on:closePicker="closePicker"/>-->
        <mpvue-picker ref="mpvuePicker" :mode="mode" :deepLength="deepLength" :pickerValueDefault="pickerValueDefault"
                      :themeColor="themeColor"
                      @onChange="onChange" @onConfirm="onConfirm" @onCancel="onCancel"
                      :pickerValueArray="pickerValueArray"></mpvue-picker>

    </div>
</template>
<style lang='scss'>
    @import "logs";
</style>
